<template>
    <van-popup :show="show" round @close="onClose">
        <div class="title">
            <div class="close-box">
                <img class="close-img" src="@/assets/img/close-popup.png" @click="onClose" />
                <img class="diwen" src="@/assets/img/矩形@3x.png" />
            </div>
            <div class="title-text">
                指标说明
            </div>
        </div>
        <div class="content">
            <div v-for="(item, index) in description" :key="index + 'desc'" class="item">
                <span :class="{ gray: item.isgray, name: true }">{{ item.name }}</span>
                <span>{{ item.desc }}</span>
            </div>
        </div>
    </van-popup>
</template>

<script lang="ts"  setup>
import { } from 'vue';
import { Popup as VanPopup } from 'vant';

defineProps({
    show: {
        type: Boolean,
        default: false
    }
});

const $emit = defineEmits(['close']);
const onClose = () => {
    $emit('close');
};


const description = [
    {
        name: '楼盘数：',
        desc: '平台资源覆盖楼盘去重计数',
    },
    {
        name: '电梯数：',
        desc: '平台资源覆盖电梯去重计数',
    },
    {
        name: '点位数：',
        desc: '平台资源点位计数',
    },
    {
        name: '覆盖人数：',
        desc: '楼盘覆盖人数*（平台资源覆盖电梯数/楼盘总电梯数），跨楼盘加和',
    },
    {
        name: '社区场景：',
        desc: '楼盘覆盖人数=覆盖家庭数*平均家庭人数*入住率（平均家庭人数为2.7人/家庭）',
        isgray: true
    },
    {
        name: '商务场景：',
        desc: '写字楼：楼盘覆盖人数=写字楼面积/8*企业入住率；综合体：楼盘覆盖人数=综合体日均人流量*直梯乘坐率，（直梯乘坐率取20%）',
        isgray: true
    },
    {
        name: '覆盖家庭数：',
        desc: '楼盘总户数*（平台资源覆盖电梯数/楼盘总电梯数），跨楼盘加和',
    },
];


</script>

<style lang="scss" scoped>
.title {
    position: relative;
    box-sizing: border-box;
    width: 90vw;

    .title-text {
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 20px;
    }

    .close-box {
        position: relative;
        display: flex;
        justify-content: flex-end;
        z-index: 1;

        .close-img {
            width: 20px;
            height: 20px;
            margin: 10px;
            position: relative;
            z-index: 2;
        }

        .diwen {
            position: absolute;
            z-index: 0;
            width: 75px;
            height: 70px;
            right: 0;
            top: 0;
        }
    }
}

.content {
    padding: 20px;

    .item {
        color: #848484;
        font-size: 14px;
        font-family: PingFangSC, sans-serif;
        font-weight: 400;
        // display: flex;

        span.name {
            color: #333333;
            font-size: 14px;
            font-family: PingFangSC, sans-serif;
            font-weight: 600;
            &.gray {
                color: #848484;
            }
        }

        &:not(:last-of-type) {
            margin-bottom: 12px;
        }
    }
}
</style>
